// pages/signature/signature.js
// canvas 全局配置
const cfg = require("../../utils/config.js");
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注册页面
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  //开始
  canvasStart: function (event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
 
  },
  data: {
    src: "",
    img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg",
    rpx: ''
  },
  onLoad: function (options) {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    var that = this
    // 使用 wx.createContext 获取绘图上下文 context
    context = wx.createCanvasContext('canvas');
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    // context.drawImage('../../images/img111.png', 0, 0, canvasw, 500);
    context.draw();
  },
 
  //过程
  canvasMove: function (event) {
    var that = this
    if (isButtonDown) {
      arrz.push(1);
      console.log(event)
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    };
 
    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      };
 
    };
    context.clearRect(0, 0, canvasw, canvash);
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
 
    context.draw(false);
  },
  // 点击保存图片
  clickMe: function () {
    let pages = getCurrentPages();
    var prevPage = '';

    // 如果长度大于等于2
    if(pages.length >= 2){//则对上面定义的flag赋值

      // 上一页
      prevPage = pages[pages.length - 2];
    }
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      fileType: 'png',
      success: function (res) {
        console.log(res.tempFilePath)
        wx.uploadFile({
          url: cfg.requestURL + '/backend/upload/mobile/upload?token=' + wx.getStorageSync('token'), //开发者服务器的 url
          filePath: res.tempFilePath, // 要上传文件资源的路径 String类型！！！
          name: 'file', // 文件对应的 key ,(后台接口规定的关于图片的请求参数)
          header: {
            'content-type': 'multipart/form-data'
          }, // 设置请求的 header
          formData: {}, // HTTP 请求中其他额外的参数
          success: function (result) {
            if(prevPage) {
              // 动态更新数据(不懂移步文章)
              // https://blog.csdn.net/weixin_44198965/article/details/107821802 获取页面栈后 可以访问页面栈中的数据-这样达到的不同页面更新数据
              prevPage.setData({
                signImg_:res.tempFilePath,
                signImg: JSON.parse(result.data).data//照片路径
              })
              wx.navigateBack({
                delta: 1,
              })
           }
          },
          fail: function (res) {
          }
        })
        
      }
    })
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.draw(false);
  },
 
})